<script>
import * as echarts from 'echarts';

import KCard from '@/components/KCard'

import { debounce } from '@/utils/index'

export default {
    components:{
        KCard
    },
    props:{
        width:{
            default:'100%',
        },
        height:{
            default:'300px',
        },
        data:{
            type:Array,
            required:true,
            default(){
                return []
            }
        },
        loading:{
            type:Boolean
        }
    },
    /**
     * [
     *      
     * ]
     */
    data() {
        return {
            chart:null,
            chartResizingWithDebounce:debounce(this.chartResizing,200)
        }
    },
    computed:{
        buildStyles(){
            const { width,height } = this
            return {
                width,height
            }
        }
    },
    methods:{
        chartResizing(){
            this.chart?.resize?.({
                animation: {
                    duration: 1500,
                    easing: 'elasticOut'
                }
            })
        },
        buildSeries(data,colorMap){
            const result = {}

            for(let item of data){
                for(let field of item.data){
                    let keys = Object.keys(result)
                    if(keys.includes(field.label)){
                        result[field.label].push(field.data)
                    }else{
                        result[field.label] = [field.data]
                    }
                }
            }

            return Object
                .keys(result)
                .map(key => {
                    return {
                        label:key,
                        color:colorMap.get(key),
                        data:result[key]
                    }
                })
                .map(item => this.buildSerieOption(item))
        },
        buildSerieOption(serie){
            const {label,data,color} = serie
            return {
                name: label,
                type: 'line',
                stack: 'Total',
                color,
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: `${color}80`
                            },
                            {
                                offset: 1,
                                color: `${color}00`
                            }
                        ])
                    }
                },
                smooth: true,
                emphasis: {
                    focus: 'series'
                },
                data
            }
        },
        buildOptions(data){
            const colorMap = new Map()
            colorMap.set('入职','#2F88FF')
            colorMap.set('离职','#9E6AFF')
            const xAxis = data.map(item => item.label),
                  legend = data.at(0)?.data.map(item => item.label),
                  series = this.buildSeries(data,colorMap)

            let option = {
                tooltip: {
                    trigger: 'axis',
                    formatter: (params) => {
                        const lines = []
                        lines.push(`${params[0].axisValue}月`)

                        for(let item of params){
                            lines.push(`
                                <span>${item.seriesName}</span>
                                &nbsp;&nbsp;
                                <span style="font-weight: bold;">${item.value.toFixed(2)}%</span>
                            `)
                        }

                        return lines.join('<br />')
                    }

                },
                legend: {
                    data: legend
                },
                grid: {
                    left: '3%',
                    right: '12%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        name:'月',
                        type: 'category',
                        boundaryGap: false,
                        data: xAxis
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLabel:{
                            formatter:(label) => `${label}%`
                        }
                    }
                ],
                series
            };
            return option
        }
    },
    watch:{
        data:function(data){
            if(!Array.isArray(data) || data.length <= 0)return
            let options = this.buildOptions(this.data)
            this.chart.setOption(options)
        }
    },
    mounted() {
        this.chart = echarts.init(this.$refs.turnoverChart)
        window.addEventListener('resize',this.chartResizingWithDebounce)
    },
    beforeDestroy(){
        window.removeEventListener('resize',this.chartResizingWithDebounce)
        this.chart?.dispose?.()
    }
}
</script>

<template>
    <KCard title="人员异动率" v-loading="loading">

        <div ref="turnoverChart" :style="buildStyles">

        </div>

    </KCard>
</template>

<style lang="scss"></style>